<template>
	<div id="Export">
		<!--view-->
		<view-box ref="viewBox">
			<x-header :left-options="{showBack: false}" title="鉴定专家" class="header">
				<a slot="left" @click="back"><i class="tp-icon icon-black-back"></i></a>
				<!--<div slot="overwrite-title">
					<div class="search-export">
						<input type="search" placeholder="请输入专家名或分类名" />
						<i class="ex-search"></i>
					</div>
				</div>-->
			</x-header>
			<!--<sticky :check-sticky-support="false">
				<ul class="screening-tab">
					<li v-for="(item,index) in screenings">
						<group @click.native="selectTab(index)">
							<cell :title="item.name" :border-intent="false" :arrow-direction="showList ? 'up' : 'down'"></cell>
						</group>
						<div class="children" v-show="item.show">
							<group>
								<p class="slide" :class="showList?'animate':''">
									<radio :options="item.children" @on-change="change" :class="checked == true ? 'isActive':''"></radio>
								</p>
							</group>
						</div>
					</li>
				</ul>
			</sticky>-->
			<div class="main">
				<div class="export-list">
					<div class="item vux-1px-b" v-for="item in expertList">
						<router-link :to="'/ExpertIntro/expert_id/' + item.expert_id">
							<div class="img">
								<img :src="'/los' + item.expert_headimg" />
							</div>
							<div class="info">
								<p class="name">{{item.expert_name}}</p>
								<p class="addresss">{{item.expert_actor}}</p>
								<p class="area">擅长领域:{{item.expert_area}}</p>
							</div>
							<div class="static">
								<p class="auction">已鉴定 <span>{{item.appraisal_count}} </span>件</p>
							</div>
						</router-link>
					</div>
				</div>
			</div>
		</view-box>
	</div>
</template>

<script>
	import $ from 'jquery';
	import {
		XHeader,
		Grid,
		GridItem,
		ViewBox,
		Sticky,
		Radio,
		Group,
		Cell
	} from 'vux';

	export default { //变量
		data() {
			return {
				title: '测试',
				showList: false,
				expertList: [],
				checked: false,
				screenings: [{
						id: '1',
						name: '鉴定机构',
						show: false,
						children: [{
								key: '2',
								value: '河南省民间艺术商会鉴定中心'
							},
							{
								key: '3',
								value: '郑州古玩城鉴定中心'
							},
							{
								key: '4',
								value: '北京古玩城鉴定中心'
							}
						]
					},
					{
						id: '5',
						name: '鉴定品类',
						show: false,
						children: [{
								key: '6',
								value: '珠宝玉石'
							},
							{
								key: '7',
								value: '核雕木雕'
							},
							{
								key: '8',
								value: '古玩字画'
							}
						]
					}
				],
			}
		},
		components: {
			XHeader,
			Grid,
			GridItem,
			ViewBox,
			Sticky,
			Radio,
			Group,
			Cell
		},
		activated() {
			this.getExpertList();
		},
		methods: {
			getExpertList: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/appraisal/expert_list.json',
					data: ''
				}).then((result) => {
					this.expertList = result.data.data;
				}).catch((err) => {
					console.log(err);
				})
			},
			change(value, label) {
				this.checked = true;
				$(this).eq(value).addClass('isActive').siblings().removeClass('isActive');
				console.log('change:', value, label);
			},
			back() {
				window.history.go(-1);
			},
			//显示隐藏
			selectTab(index) {
				//				$(this).eq(index).addClass('active').siblings().removeClass('active');
				this.showList = !this.showList;
				for(let i = 0; i < this.screenings.length; i++) {
					this.screenings[i].show = false;
					if(i == index) {
						this.screenings[index].show = !this.screenings[index].show;
					}
				}
			},
		}
	}
</script>

<style scoped>
	#Export {
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
		background-color: #fff;
	}
	
	.isActive {
		color: #a30000;
	}
	
	.header {
		background-color: #fff !important;
	}
	
	.search-export {
		position: relative;
		margin: 4px 0;
		height: 32px;
	}
	
	.search-export input {
		width: 100%;
		height: 32px;
		line-height: 14px;
		background-color: #f5f5f5;
		border-radius: 0.05333rem;
		padding: 4px 20px 4px 30px;
	}
	
	.search-export input::placeholder {
		color: #aaa;
	}
	
	.search-export .ex-search {
		position: absolute;
		left: 10px;
		top: 11px;
	}
	
	.screening-tab {
		position: relative;
		display: flex;
		justify-content: center;
		background-color: #fff;
	}
	
	.screening-tab li {
		width: 100%;
		height: 1.06666rem;
		line-height: 1.06666rem;
		text-align: center;
		font-size: 0.4rem;
	}
	
	.screening-tab li .children {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		text-align: left;
		background-color: #fff;
		z-index: 9;
	}
	
	.main {}
	
	.export-list {}
	
	.export-list .item {
		padding: 0.58666rem 0.26666rem;
		overflow: hidden;
	}
	
	.export-list .item .img {
		font-size: 0;
		width: 1.70666rem;
		height: 1.70666rem;
		display: inline-block;
		float: left;
	}
	
	.export-list .item .img img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.export-list .item .info {
		padding-left: 0.4rem;
		line-height: 1;
		float: left;
		display: inline-block;
		width: 5.8rem;
		overflow: hidden;
	}
	
	.export-list .item .info .name {
		font-size: 0.4rem;
	}
	
	.export-list .item .info .name span {
		color: #aaa;
		font-size: 0.32rem;
	}
	
	.export-list .item .info .addresss {
		padding: 0.28rem 0;
		font-size: 0.37333rem;
		color: #777;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.export-list .item .info .area {
		font-size: 0.37333rem;
		color: #777;
		height: 0.8rem;
		line-height: 0.4rem;
	}
	
	.export-list .item .info .area span {
		font-size: 0.32rem;
		color: #aaa;
	}
	
	.export-list .item .static {
		position: relative;
		height: 1.73333rem;
		display: inline-block;
		float: left;
		text-align: right;
	}
	
	.export-list .item .static .auction {
		color: #aaa;
		font-size: 0.32rem;
	}
	
	.export-list .item .static .level {
		position: absolute;
		top: 1.7rem;
		right: 0;
		color: #f1aa41;
		font-size: 0.32rem;
		vertical-align: bottom;
	}
	
	.sub-item {
		color: #888;
	}
	
	.slide {
		padding: 0 20px;
		overflow: hidden;
		max-height: 0;
		transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
	}
	
	.animate {
		max-height: 9999px;
		transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
		transition-delay: 0s;
	}
</style>
<style>
	#Export #vux_view_box_body {
		padding-bottom: 0;
	}
	
	#Export .vux-header-title-area {
		margin-right: 20px;
		margin-left: 48px;
	}
	
	.screening-tab li .children .weui-check__label {
		padding-left: 15px !important;
	}
</style>